<template>
	<view>
		<view v-if="title != ''" class="title">{{ title }}</view>
		<view v-if="title != ''" class="subtitle">建议上传图片尺寸比例为16:9格式为jpg、png、jpeg类型的图片大小不超过12M。</view>
		<view class="flex fileBox">
			<view class="addimg promotional_video" :class="source ? 'sourceBox' : ''" @click="previewImage(index)" v-for="(i, index) in list" v-show="list">
				<image class="colse" @click.stop="delImages(index)" src="/static/images/colse.png" mode=""></image>
				<image :src="i" class="bg" mode="aspectFit"></image>
			</view>
			<view class="addimg" :class="source ? 'sourceBox' : ''" @click="upimages">
				<image class="icon imgcentent" src="/static/images/addimg.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'upItem',
		props: {
			title: {
				type: String,
				default: '',
			},
			source: false,
			listData: {
				type: Array,
				default: () => [],
			},
			maxLength: {
				type: String,
				default: 'countless',
			},
		},
		watch: {
			listData(newVal) {
				this.list = newVal;
			},
		},
		data() {
			return {
				list: null,
			};
		},
		mounted() {
			this.list = this.listData;
		},
		methods: {
			async upimages() {
				const res = await this.$api.upload('image');
				if (this.maxLength === 'countless') {
					this.list = Array.isArray(this.list) ? [...this.list, res.uri] : [res.uri];
				} else {
					this.list = [res.uri];
				}
				this.$emit('changeList', this.list);
			},
			delImages(index) {
				this.list.splice(index, 1);
				this.$emit('changeList', this.list);
			},

			previewImage(index) {
				uni.previewImage({
					urls: this.list,
					current: index,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.title {
		font-size: $uni-font-size-12;
		margin: 30rpx 0 20rpx;
	}

	.subtitle {
		color: #999999;
		font-size: $uni-font-size-10;
		margin-bottom: 20rpx;
	}

	.addimg {
		width: 200rpx;
		height: 150rpx;
		background: #f5f5f5;
		position: relative;
		margin-bottom: $submargin-width;

		.icon {
			width: 41.9rpx;
			height: 41.9rpx;
		}
	}

	.fileBox {
		flex-wrap: wrap;
		position: relative;

		.colse {
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			top: 10rpx;
			right: 10rpx;
			z-index: 2;
		}

		.promotional_video {
			position: relative;
			margin-right: $margin-width;

			&:nth-child(3n) {
				margin-right: 0;
			}
		}

		.sourceBox {
			width: 200rpx;
			margin-right: $submargin-width;
			&:nth-child(3n) {
				margin-right: 0;
			}
		}
	}
</style>
